// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { Popup } from '@knno/ui/popup';
import { Button } from '@knno/ui/jsx/button';
import { PopMenu } from '@knno/ui/popMenu';
import { bar } from './index.css';
import { vars } from '@knno/ui/global.css';
import SVGMail from '@mdi/svg/svg/email-outline.svg';
import SVGRefresh from '@mdi/svg/svg/refresh.svg';
import { Dialog } from '@knno/ui/dialog';

export function ShowPopup() {
	return (
		<>
			<h2>弹出层</h2>
			<div class={bar}>
				<Button
					text="弹出层：右侧-上对齐"
					ref={(btn) => {
						btn.on('click', () => {
							Popup.create(...ShowPopup()).show(btn, 'right-top');
						});
					}}
				/>
				<Button
					text="弹出层：下侧-左对齐"
					ref={(btn) => {
						btn.on('click', () => {
							Popup.create(...ShowPopup()).show(btn, 'bottom-left');
						});
					}}
				/>
				<Button
					text="弹出层：下侧-中对齐"
					ref={(btn) => {
						btn.on('click', () => {
							Popup.create(...ShowPopup()).show(btn, 'bottom-center');
						});
					}}
				/>
				<Button
					text="弹出层：下侧-右对齐"
					ref={(btn) => {
						btn.on('click', () => {
							Popup.create(...ShowPopup()).show(btn, 'bottom-right');
						});
					}}
				/>
				<Button
					text="弹出层：左侧-中对齐"
					ref={(btn) => {
						btn.on('click', () => {
							Popup.create(...ShowPopup()).show(btn, 'left-middle');
						});
					}}
				/>
			</div>
			<div
				style={{ height: '5em', border: `1px solid ${vars.color.border}`, margin: '2em 0' }}
				oncontextmenu={function (evt) {
					evt.preventDefault();
					Popup.create(...ShowPopup()).show(this, { x: evt.x, y: evt.y });
				}}
			>
				鼠标右键弹出
			</div>
			<div style={{ display: 'flex', gap: '1em' }}>
				<div
					style={{ flex: 1, height: '5em', border: `1px solid ${vars.color.border}` }}
					oncontextmenu={function (evt) {
						evt.preventDefault();
						PopMenu.show(
							{
								refer: this,
								useAction: true,
								popupPosition: { x: evt.x, y: evt.y },
							},
							[
								{
									value: 'menu1',
									text: '菜单1菜单1菜单1',
								},
								{
									value: 'menu2',
									text: '菜单2',
								},
								{
									value: 'menuDis',
									text: '菜单禁用',
									disabled: true,
								},
								{
									value: 'menu3',
									text: '菜单3',
								},
							]
						).onSelect((row) => {
							Dialog.alert(row.value + '');
						});
					}}
				>
					鼠标右键弹出菜单
				</div>
				<div
					style={{ flex: 1, height: '5em', border: `1px solid ${vars.color.border}` }}
					oncontextmenu={function (evt) {
						evt.preventDefault();
						PopMenu.show(
							{
								refer: this,
								useAction: true,
								popupPosition: { x: evt.x, y: evt.y },
							},
							[
								{
									value: 'menu1',
									text: '菜单1',
								},
								{
									value: 'menu2',
									text: '菜单2',
									children: [
										{
											value: 'sub-menu1',
											text: '子菜单1',
											icon: SVGRefresh,
										},
										{
											value: 'sub-menu2',
											text: '子菜单2',
											icon: SVGMail,
										},
									],
								},
								{ line: true },
								{
									value: 'menu3',
									text: '菜单3',
									children: [
										{
											value: 'sub-menu3',
											text: '子菜单3',
										},
										{
											value: 'sub-menu4',
											text: '子菜单4',
											icon: SVGMail,
											children: [
												{
													value: 'sub-menu5',
													text: '子菜单5',
													icon: SVGRefresh,
												},
												{
													value: 'sub-menu6',
													text: '子菜单6',
													icon: SVGMail,
												},
											],
										},
									],
								},
							]
						).onSelect((row) => {
							Dialog.alert(row.value + '');
						});
					}}
				>
					鼠标右键弹出菜单
				</div>
				<div
					style={{ flex: 1, height: '5em', border: `1px solid ${vars.color.border}` }}
					oncontextmenu={function (evt) {
						evt.preventDefault();
						PopMenu.show(
							{
								refer: this,
								useAction: true,
								popupPosition: { x: evt.x, y: evt.y },
							},
							[
								{
									value: 'menu1',
									text: '菜单1菜单1菜单1',
									icon: SVGMail,
								},
								{
									value: 'menu2',
									text: '菜单2',
									children: [
										{
											value: 'sub-menu1',
											text: '子菜单1',
										},
										{
											value: 'sub-menu2',
											text: '子菜单2',
										},
									],
								},
								{
									value: 'menu3',
									text: '菜单3',
									icon: SVGRefresh,
								},
							]
						).onSelect((row) => {
							Dialog.alert(row.value + '');
						});
					}}
				>
					鼠标右键弹出菜单
				</div>
			</div>
		</>
	);
}
